<template>
    <div class="container_box">
        <el-scrollbar class="main_box">
            <div class="smart-marketing-container">
                <el-form ref="ruleFormRef" :model="formData" :rules="rules">
                    <div class="smc-title">基本信息</div>
                    <el-form-item label="规则名称" prop="title" label-width="120px">
                        <el-input
                            v-model="formData.title"
                            placeholder="请输入规则名称"
                            maxlength="15"
                            class="w580"
                            :disabled="isLook" />
                    </el-form-item>
                    <el-form-item label="有效期" label-width="120px" prop="period_type">
                        <el-radio-group v-model="formData.period_type" :disabled="isLook">
                            <el-radio :label="1">永久</el-radio>
                            <el-radio :label="2">固定期限</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if="formData.period_type == 2" label="" label-width="120px">
                        <el-date-picker
                            v-model="formData.period_time"
                            type="datetimerange"
                            format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            :default-time="defaultTime()"
                            :disabled-date="time => time.getTime() < Date.now() - 8.64e7"
                            range-separator="-"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :disabled="isLook" />
                    </el-form-item>

                    <el-form-item label="规则描述" label-width="120px">
                        <el-input
                            v-model="formData.desc"
                            class="w580"
                            type="textarea"
                            :rows="4"
                            placeholder="请输入规则描述"
                            :maxlength="50"
                            :show-word-limit="true"
                            :disabled="isLook">
                        </el-input>
                    </el-form-item>

                    <div class="border mb24"></div>
                    <div class="smc-title">规则设定</div>
                    <el-form-item label="触发对象" label-width="120px" prop="trigger_type">
                        <el-radio-group v-model="formData.trigger_type" :disabled="isLook">
                            <el-radio :label="1">全部客户</el-radio>
                            <el-radio :label="2">指定客户</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <!-- 触发对象 of start -->
                    <div v-if="formData.trigger_type == 2" class="trigger-container">
                        <el-form-item label-wdith="140px" label="客户阶段：">
                            <div class="d-flex">
                                <el-radio-group
                                    v-model="formData.isAllStage"
                                    class="mr-1"
                                    :disabled="isLook"
                                    @change="changeSatge">
                                    <el-radio label="1">全部</el-radio>
                                </el-radio-group>
                                <el-checkbox-group
                                    v-model="formData.trigger_rule.stage_id"
                                    :disabled="isLook"
                                    @change="changeSatgeitem">
                                    <el-checkbox v-for="item in stageList" :key="item.id" :label="item.id">
                                        {{ item.name }}
                                    </el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </el-form-item>
                        <el-form-item label-wdith="140px" label="客户来源：">
                            <div class="d-flex">
                                <el-radio-group
                                    v-model="formData.isAllSource"
                                    class="mr-1"
                                    :disabled="isLook"
                                    @change="changeSource">
                                    <el-radio label="1">全部</el-radio>
                                </el-radio-group>
                                <el-checkbox-group
                                    v-model="formData.trigger_rule.source_id"
                                    :disabled="isLook"
                                    @change="changeSourceitem">
                                    <el-checkbox v-for="item in sourceList" :key="item.id" :label="item.id">
                                        {{ item.name }}
                                    </el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </el-form-item>
                        <el-form-item label="客户标签：">
                            <el-radio-group
                                v-model="formData.trigger_rule.tag_type"
                                class="mr-1"
                                :disabled="isLook"
                                @change="changeTagType">
                                <el-radio label="1">不限</el-radio>
                                <el-radio label="2">满足以下任意标签</el-radio>
                                <el-radio label="3">满足以下全部标签</el-radio>
                            </el-radio-group>
                            <div v-if="formData.trigger_rule.tag_type == '2'" class="tags-container d-flex flex-column">
                                <div class="mb-1">
                                    <el-tag
                                        v-for="tag in tagsList"
                                        :key="tag.name"
                                        color="#FFFAF9"
                                        class="mr-1"
                                        type="warning"
                                        :closable="!isLook"
                                        @close="handleCloseTriggerTag(tag.id, 0)">
                                        {{ tag.name }}
                                    </el-tag>
                                </div>
                                <div>
                                    <el-button :disabled="isLook" @click="openBatchLabel(0)">选择标签</el-button>
                                </div>
                            </div>
                            <div v-if="formData.trigger_rule.tag_type == '3'" class="tags-container d-flex flex-column">
                                <div class="mb-1">
                                    <el-tag
                                        v-for="tag in tagsList1"
                                        :key="tag.name"
                                        color="#FFFAF9"
                                        class="mr-1"
                                        type="warning"
                                        :closable="!isLook"
                                        @close="handleCloseTriggerTag(tag.id, 1)">
                                        {{ tag.name }}
                                    </el-tag>
                                </div>
                                <div>
                                    <el-button :disabled="isLook" @click="openBatchLabel(1)">选择标签</el-button>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="排除客户标签：">
                            <el-switch v-model="formData.exclude" :disabled="isLook" @change="handleExclude" />
                            <div v-if="tagsList2.length > 0" class="mb-1">
                                <el-tag
                                    v-for="tag in tagsList2"
                                    :key="tag.name"
                                    color="#FFFAF9"
                                    class="mr-1"
                                    type="warning"
                                    :closable="!isLook"
                                    @close="handleCloseTriggerTag(tag.id, 2)">
                                    {{ tag.name }}
                                </el-tag>
                            </div>
                            <div v-if="formData.exclude">
                                <el-button :disabled="isLook" @click="openBatchLabel(2)">选择标签</el-button>
                            </div>
                        </el-form-item>
                    </div>
                    <!-- 触发对象 of end -->

                    <!-- 触发条件 of start -->
                    <el-form-item label="触发条件" label-width="120px" required>
                        <div>
                            当客户在店铺
                            <el-select
                                v-model="formData.trigger_condition.retail_shop_id"
                                style="margin-right: 8px"
                                clearable
                                placeholder="请选择店铺"
                                filterable
                                :disabled="isLook"
                                @change="handleSelectRetailShop">
                                <el-option
                                    v-for="item in storeOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                            <el-select
                                v-model="formData.trigger_condition.behaviour_type"
                                clearable
                                placeholder="请选择用户行为"
                                filterable
                                :disabled="isLook"
                                @change="changeBehaviour">
                                <el-option
                                    v-for="item in behaviorOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                            <span
                                v-if="![2, 5, 6].includes(formData.trigger_condition.behaviour_type)"
                                class="text-tip">
                                后，
                            </span>
                            <span v-if="[2, 5, 6].includes(formData.trigger_condition.behaviour_type)" class="text-tip">
                                时，商品
                            </span>
                            <el-select
                                v-if="[2, 5].includes(formData.trigger_condition.behaviour_type)"
                                v-model="formData.trigger_condition.filter"
                                clearable
                                placeholder="请选择"
                                filterable
                                :disabled="isLook"
                                @change="changeFilter">
                                <el-option
                                    v-for="item in filterOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                            <el-select
                                v-if="[6].includes(formData.trigger_condition.behaviour_type)"
                                v-model="formData.trigger_condition.filter"
                                clearable
                                placeholder="请选择"
                                filterable
                                :disabled="isLook"
                                @change="changeFilter">
                                <el-option
                                    v-for="item in filterOptions2"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                            <span v-if="[2, 5, 6].includes(formData.trigger_condition.behaviour_type)" class="text-tip">
                                后，
                            </span>
                            <el-input-number
                                v-model="formData.trigger_condition.minute"
                                style="width: 90px"
                                :min="0"
                                controls-position="right"
                                :disabled="isLook" />
                            分钟后，
                            <el-select
                                v-if="[5, 6, 7, 9].includes(formData.trigger_condition.behaviour_type)"
                                v-model="formData.trigger_condition.next_behaviour"
                                style="margin-right: 8px"
                                clearable
                                placeholder="请选择行为"
                                filterable
                                :disabled="isLook">
                                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                            触发规则。
                        </div>
                    </el-form-item>

                    <el-form-item label="" label-width="120px" prop="trigger_condition.product">
                        <SelectGoods
                            v-if="isShowGoods"
                            :is-look="isLook"
                            :multiple="isMultiple"
                            :source="[source]"
                            :select_goods_list="selectGoods"
                            :store_list="[Number(formData.trigger_condition.retail_shop_id)]"
                            @selectedGoods="getGoods" />
                    </el-form-item>

                    <!-- 触发条件 of end -->

                    <!-- 触达方式 of start -->
                    <el-form-item label="触发方式" label-width="120px">
                        <el-radio-group v-model="formData.trigger_way" :disabled="isLook" @change="handleSelectTrigger">
                            <el-radio :label="1">
                                <div style="display: flex; align-items: center">
                                    群发员工消息
                                    <el-tooltip
                                        class="box-item"
                                        content="如果客户没有微信/企微的触达方式，则不触发。"
                                        placement="top">
                                        <img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" />
                                    </el-tooltip>
                                </div>
                            </el-radio>

                            <el-radio :label="2">
                                <div style="display: flex; align-items: center">
                                    发短信
                                    <el-tooltip
                                        class="box-item"
                                        content="如果客户没有手机号，自动过滤，将不发送短信。"
                                        placement="top">
                                        <img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" />
                                    </el-tooltip>
                                </div>
                            </el-radio>
                            <el-radio :label="3">
                                <div style="display: flex; align-items: center">
                                    员工消息任务
                                    <el-tooltip
                                        class="box-item"
                                        content="员工收到应用通知后，进入详情页面手动发送。"
                                        placement="top">
                                        <img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" />
                                    </el-tooltip>
                                </div>
                            </el-radio>
                        </el-radio-group>
                        <span v-if="formData.trigger_way == 2" class="msg-text">（{{ msgText }}）</span>
                    </el-form-item>
                    <!-- 触发方式 of end -->

                    <div class="touch-method">
                        <el-form-item
                            v-if="[1, 3].includes(formData.trigger_way)"
                            label="任务标题"
                            label-width="120px"
                            prop="task_title">
                            <el-input
                                v-model="formData.task_title"
                                placeholder="请输入任务标题"
                                show-word-limit
                                maxlength="20"
                                class="w580"
                                :disabled="isLook">
                            </el-input>
                        </el-form-item>
                        <!-- 消息内容 -->
                        <div v-if="[1, 3].includes(formData.trigger_way)">
                            <el-form-item label="任务内容" label-width="120px" required>
                                <div class="content">
                                    <div class="content-left">
                                        <MaterialContent
                                            ref="materialContentRef"
                                            :max-num="9"
                                            :input-content-tabs="inputContentTabs"
                                            :show-material-tabs="showMaterialTabs"
                                            :input-content-data="inputContentData"
                                            :material-content-data="materialContentData"
                                            @change="changeMaterial" />
                                    </div>
                                    <div class="content-right">
                                        <div class="phone-title">欢迎语预览</div>
                                        <PhonePreview ref="phonePreviewRef" />
                                    </div>
                                </div>
                            </el-form-item>
                        </div>
                        <!-- 短信模版 -->
                        <div v-if="formData.trigger_way == 2" class="sms-msg">
                            <el-form-item label="短信签名" label-width="120px">
                                <div clss="d-flex flex-row">
                                    <el-select
                                        v-model="formData.sms_sign_id"
                                        class="w400"
                                        clearable
                                        placeholder="请选择短信签名"
                                        filterable
                                        :disabled="isLook"
                                        @change="handleSelectSms">
                                        <el-option
                                            v-for="item in smsOptions"
                                            :key="item.id"
                                            :label="item.sign_name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                    <div v-if="source == 7" class="sms-text">
                                        没有合适的签名， <span @click="toAuthList(7)">去申请</span>
                                    </div>
                                    <div v-else-if="source == 3 || source == 6" class="sms-text">
                                        没有合适的签名， <span @click="toAuthList(5)">去申请</span>
                                    </div>
                                    <div v-else class="sms-text">
                                        没有合适的签名， <span @click="toAuthList(3)">去申请</span>
                                    </div>
                                </div>
                            </el-form-item>
                            <el-form-item label="短信模版" label-width="120px">
                                <div clss="d-flex flex-row">
                                    <el-select
                                        v-model="formData.sms_template_id"
                                        class="w400"
                                        clearable
                                        placeholder="请选择短信模版"
                                        filterable
                                        :disabled="isLook"
                                        @change="handleSelectSmsTem">
                                        <el-option
                                            v-for="item in smsTemOptions"
                                            :key="item.id"
                                            :label="item.template_name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                    <div v-if="source == 7" class="sms-text">
                                        没有合适的模版，
                                        <span class="sms-link" @click="toAuthList(8)">去申请</span>
                                    </div>
                                    <div v-else-if="source == 3 || source == 6" class="sms-text">
                                        没有合适的模版，
                                        <span class="sms-link" @click="toAuthList(6)">去申请</span>
                                    </div>
                                    <div v-else class="sms-text">
                                        没有合适的模版，
                                        <span class="sms-link" @click="toAuthList()">去申请</span>
                                    </div>
                                </div>
                            </el-form-item>
                            <el-form-item label-width="120px">
                                <div class="tem-box" v-html="formData.sms_template"></div>
                            </el-form-item>
                        </div>
                    </div>
                </el-form>
                <!-- 选择标签 -->
                <BatchLabel ref="BatchLabelRef" @save="val => getTagsFun(val, 0)" />
                <BatchLabel1 ref="BatchLabelRef1" @save="val => getTagsFun(val, 1)" />
                <BatchLabel2 ref="BatchLabelRef2" @save="val => getTagsFun(val, 2)" />
                <!-- 素材标签 -->
                <ZWMatericalLib ref="ZWMatericalLibRef" @submit="getMaterlib" />
            </div>
        </el-scrollbar>
        <div v-if="!isLook" class="footer_box">
            <el-button @click="submitCancel()">取消</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef, 2)">保存</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef, 1)">保存并开启</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onBeforeMount, onMounted } from 'vue';
import router from '@/router';
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import { customerStatus, customerFrom } from '@/api/customer/clubManage/commonSea';
import { getStoreList } from '@/api/ecommerce/storeManage';
import {
    getIsSmsService,
    saveMarketRule,
    getRuleDetails,
    getPrevBehavior,
    getNextBehavior
} from '@/api/smartMarketing/precisionMarketing';
import BatchLabel from '@/components/BatchLabel.vue';
import BatchLabel1 from '@/components/BatchLabel.vue';
import BatchLabel2 from '@/components/BatchLabel.vue';
// import ZWMatericalLib from "@/components/channelNew/ZWMatericalLibNew.vue";
// import ZWMatericalLib from '@/components/channelNew/ZWMatericalLib.vue'
import ZWMatericalLib from '@/components/channelNewOriginal/ZWMatericalLib.vue';
import Friend from './components/Friend.vue';
import ZWEmoji from '@/components/ZWEmoji.vue';
import SelectGoods from '@/components/zw/selectGoods/union.vue';
import _ from 'lodash';
import moment from 'moment';
import { defaultTime } from '@/utils/utils';

import { getVideoImage, getSuffixIcon, useInsertWelcomeContent, getSetionId } from '@/utils/utils';
import { getCustomeSmsSignList, getCustomeSmsTemplateList, getCustomeSmsAuthSso } from '@/api/customer/manage/list';

import { initMaterialData } from '@/utils/utils';
import { startLoading, endLoading } from '@/utils/request';

import MaterialContent from '@/components/zw/materialContent/index.vue';
import PhonePreview from '@/components/zw/phonePreview/welcomePhonePreview/materialPreview/index.vue';
import dayjs from 'dayjs';

const inputContentTabs = ref<Array<number>>([1, 2, 6]); // 配置欢迎语输入框选项
const showMaterialTabs = ref<Array<string>>(['1', '2', '3', '4', '5', '6', '7', '9']); // 配置选择素材组件类型
const inputContentData = ref<string>(''); //  用户存放回显数据  欢迎语输入框
const materialContentData = ref<Array<any>>([]); //  用户存放回显数据  欢迎语素材

const materialResult = ref<any>(null);
const materialContentRef = ref<any>(null);

const changeMaterial = (val: any) => {
    materialResult.value = val;
};

// 页面类型：create、edit、copy
const pageType = ref('create');

// 复制到规则标题
const copyText = ref('');

// 查看

const isLook = ref(false);

// 标签
const tagsList = ref<any>([]);
const tagsList1 = ref<any>([]);
const tagsList2 = ref<any>([]);

// 打开选择标签弹框
const BatchLabelRef = ref<any>(null);
const BatchLabelRef1 = ref<any>(null);
const BatchLabelRef2 = ref<any>(null);

// 客户阶段列表
const stageList: any = ref([]);
// 客户阶段IDS列表
const stageIdsList: any = ref([]);
const isShowGoods: any = ref();
const isMultiple: any = ref();
const selectGoods: any = ref([]);
const filterOptions = reactive([
    {
        id: 1,
        name: '不限商品'
    },
    {
        id: 2,
        name: '指定商品'
    }
]);
const filterOptions2 = reactive([
    {
        id: 1,
        name: '不限商品'
    },
    {
        id: 2,
        name: '包含以下任意商品'
    },
    {
        id: 3,
        name: '包含以下所有商品'
    }
]);
// 获取客户阶段列表数据
const getStageList = async (flag?: boolean) => {
    const res = await customerStatus(null, flag);
    stageList.value = res;
    stageIdsList.value = res.map((v: any) => v.id);
};

// 选择全部客户阶段
const changeSatge = (val: any) => {
    formData.trigger_rule.stage_id = stageIdsList.value;
};

// 选择客户阶段
const changeSatgeitem = (val: any) => {
    if (formData.trigger_rule.stage_id.length == stageIdsList.value.length) {
        formData.isAllStage = '1';
    } else {
        formData.isAllStage = '';
    }
};

// 客户来源列表
const sourceList: any = ref([]);

// 客户来源IDS列表
const sourceIdsList: any = ref([]);

// 获取客户阶段列表数据
const getSourceList = async (flag?: boolean) => {
    const { data } = await customerFrom(null, flag);
    sourceList.value = data;
    sourceIdsList.value = data.map((v: any) => v.id);
};

// 选择全部客户来源
const changeSource = (val: any) => {
    formData.trigger_rule.source_id = sourceIdsList.value;
};

// 选择客户阶段
const changeSourceitem = (val: any) => {
    if (formData.trigger_rule.source_id.length == sourceIdsList.value.length) {
        formData.isAllSource = '1';
    } else {
        formData.isAllSource = '';
    }
};

// 店铺列表
const storeOptions = ref<any>([]);

// 获取客户店铺列表数据
const fetchStoreList = async (flag?: boolean) => {
    const { data } = await getStoreList({ page_size: 100 }, flag);
    storeOptions.value = data.filter((v: any) => v.state == 1);
    // formData.trigger_condition.retail_shop_id = storeOptions.value[0].id;
};
/**
 * 当选择“抖店店铺”时，发短信的时候，只能选择抖店的短信签名和模版。
    点击去申请，跳转至抖店的签名/短信页面。
    当选择包含短链模版的模版时，拼接kid在短链尾部做标识
 */

const source = ref(0);
//  选择店铺
const handleSelectRetailShop = (val: any) => {
    formData.sms_sign_id = '';
    formData.sms_template_id = '';
    formData.sms_template = '';
    const storeItem = storeOptions.value.find((item: any) => {
        return item?.id == val;
    });
    source.value = storeItem.source;

    // 根据店铺类型获取用户行为
    getPrevBehavior({ source: storeItem.source }).then((res: any) => {
        behaviorOptions.value = res;
    });

    handleFilterStore(formData.trigger_condition.retail_shop_id);
    if (formData.trigger_way == 2 && storeItem.source == 7) {
        getCustomeSmsSignListFetch(storeItem.source);
    } else {
        getCustomeSmsSignListFetch('');
    }
};

//  选择触发方式
const handleSelectTrigger = (val: any) => {
    if (val == 2) {
        handleFilterStore(formData.trigger_condition.retail_shop_id);
    }
};

const handleFilterStore = (val: any) => {
    const storeItem = storeOptions.value.find((item: any) => {
        return item?.id == val;
    });
    if (storeItem) getCustomeSmsSignListFetch(storeItem.source);
    else getCustomeSmsSignListFetch('');
};
// 切换标签类型
const changeTagType = (val: any) => {
    // tagsList.value = [];
    // formData.trigger_rule.tags = [];
};
const getGoods = (val: any) => {
    selectGoods.value = val;
    formData.trigger_condition.product = getSetionId('id', selectGoods.value);
    ruleFormRef.value.clearValidate();
};
// 获取当前选中的标签
const getTagsFun = async (value: any, type: number) => {
    const val = _.cloneDeep(value);
    switch (type) {
        case 0:
            tagsList.value = _.cloneDeep(val.data);
            formData.trigger_rule.tags = _.cloneDeep(val.idList);
            break;
        case 1:
            tagsList1.value = _.cloneDeep(val.data);
            formData.trigger_rule.tags = _.cloneDeep(val.idList);
            break;
        case 2:
            tagsList2.value = _.cloneDeep(val.data);
            formData.trigger_rule.exclude_tags = _.cloneDeep(val.idList);
            break;
        default:
            break;
    }
};

const openBatchLabel = (val: number) => {
    switch (val) {
        case 0:
            BatchLabelRef.value.dialogData.delname = '不移除';
            BatchLabelRef.value.title = '选择客户标签';
            BatchLabelRef.value.dialogData.labelChooseType = 2;
            BatchLabelRef.value.chooseDataArr = tagsList.value;
            BatchLabelRef.value.dialogVisible = true;
            break;
        case 1:
            BatchLabelRef1.value.dialogData.delname = '不移除';
            BatchLabelRef1.value.title = '选择客户标签';
            BatchLabelRef1.value.dialogData.labelChooseType = 2;
            BatchLabelRef1.value.chooseDataArr = tagsList1.value;
            BatchLabelRef1.value.dialogVisible = true;
            break;
        case 2:
            BatchLabelRef2.value.dialogData.delname = '不移除';
            BatchLabelRef2.value.title = '选择客户标签';
            BatchLabelRef2.value.dialogData.labelChooseType = 2;
            BatchLabelRef2.value.chooseDataArr = tagsList2.value;
            BatchLabelRef2.value.dialogVisible = true;
            break;
        default:
            break;
    }
};
// 关闭标签
const handleCloseTriggerTag = (tag: number, type: number) => {
    switch (type) {
        case 0:
            tagsList.value.splice(tagsList.value.indexOf(tag), 1);
            formData.trigger_rule.tags = tagsList.value.map((v: any) => v.id);
            break;
        case 1:
            tagsList1.value.splice(tagsList1.value.indexOf(tag), 1);
            formData.trigger_rule.tags = tagsList1.value.map((v: any) => v.id);
            break;
        case 2:
            tagsList2.value.splice(tagsList2.value.indexOf(tag), 1);
            formData.trigger_rule.exclude_tags = tagsList2.value.map((v: any) => v.id);
            break;
        default:
            break;
    }
};

// 切换排除客户标签
const handleExclude = (val?: any) => {
    formData.trigger_rule.exclude_tags = [];
    tagsList2.value = [];
};

// 用户行为
const behaviorOptions = ref([
    // {
    //   id: 5,
    //   name: '加购'
    // },
    // {
    //   id: 6,
    //   name: '下单'
    // },
    // {
    //   id: 7,
    //   name: '支付'
    // },
    // {
    //   id: 8,
    //   name: '签收'
    // },
    // {
    //   id: 9,
    //   name: '退货'
    // },
    // {
    //   id: 10,
    //   name: '评论'
    // },
    // {
    //   id: 11,
    //   name: '交易完成'
    // }
]);

//未下单1
//不限制下单2;
//未支付 3;
//不限制支付4;
//未评论5;
//不限制评论6;
//未取消退货7;
//不限制取消退货8;

const options = ref([
    // {
    //   id: 1,
    //   name: '未下单'
    // },
    // {
    //   id: 2,
    //   name: '不限制下单'
    // }
]);

// 切换用户行为
const changeBehaviour = (val: any) => {
    formData.trigger_condition.next_behaviour = '';
    formData.trigger_condition.filter = 1;
    selectGoods.value = [];
    isShowGoods.value = false;
    getNextBehavior({ source: source.value, id: val }).then((res: any) => {
        options.value = res;
    });
};

// 切换用户行为
const changeBehaviour1 = (val: any, flag?: boolean) => {
    return getNextBehavior({ source: source.value, id: val }, flag).then((res: any) => {
        options.value = res;
    });
};

// 是否开启短信
const isSmsService = ref(1);
const msgText = ref('使用该项，请确保已开启短信服务。请保证短信约充足，否则，可能导致短信欠费而无法发送。');
const getIsSmsServiceFetch = async (flag?: boolean) => {
    const { is_open } = await getIsSmsService(null, flag);
    isSmsService.value = is_open;
    if (is_open == 2) {
        msgText.value = '短信服务未开通，去开通';
    }
};

const ZWMatericalLibRef = ref(null);
const upload_list_box = ref(null);
const upload_list = ref(null);
const friend = ref(null);
const newArr = ref([]);
const fileList = ref([]);

const uploadList = reactive([
    // id 素材库  key 转化后的
    { id: '2', key: '1', icon: '/static/file/pic.png', name: '图片' },
    { id: '3', key: '4', icon: '/static/file/mp3.png', name: '音频' },
    { id: '4', key: '2', icon: '/static/file/mov.png', name: '视频' },
    { id: '5', key: '5', icon: '/static/file/ysb.png', name: '文件' },
    { id: '6', key: '3', icon: '/static/file/link.png', name: '链接' },
    { id: '8', key: '6', icon: '/static/file/wbgg.png', name: '抽奖' },
    { id: '27', key: '7', icon: '/static/file/form.png', name: '收集表' },
    { id: '99', key: '8', icon: '/static/file/shop.png', name: '电商' }
    // { id: "15", key: "10", icon: "/static/file/official.png", name: "公众号图文" },
]);
// 删除上传的文件
const remove = (data: any) => {
    if (data.code) {
        fileList.value = fileList.value.filter((item: any) => item.code != data.code);
        newArr.value = newArr.value.filter((item: any) => item.code != data.code);
    } else {
        if (data.type == 10) {
            const index = fileList.value.findIndex((item: any) => item.id == data.id && data.type == 10);
            fileList.value.splice(index, 1);
            newArr.value.splice(index, 1);
        } else if (data.type == 12) {
            const index = fileList.value.findIndex((item: any) => item.id == data.id && data.type == 12);
            fileList.value.splice(index, 1);
            newArr.value.splice(index, 1);
        } else {
            // fileList.value = fileList.value.filter((item: any) => item.id != data.id);
            // newArr.value = newArr.value.filter((item: any) => item.id != data.id);
            const index = fileList.value.findIndex((item: any) => item.id == data.id);
            fileList.value.splice(index, 1);
            newArr.value.splice(index, 1);
            formData.task_content.welcome_friend_attachment_ids.splice(index, 1);
        }
    }
    if (formData.task_content.welcome_friend_attachment_ids.indexOf(data.id) != -1) {
        formData.task_content.welcome_friend_attachment_ids.splice(
            formData.task_content.welcome_friend_attachment_ids.indexOf(data.id),
            1
        );
    }
};
//打开上传文件弹框
const openUpload = (num: string) => {
    const showTabs = ['2', '4', '5', '3', '6', '27', '8', '99'];
    ZWMatericalLibRef.value.showTabs = showTabs;
    ZWMatericalLibRef.value.localUploadisShow = ['2', '3', '4', '5', '6'];
    ZWMatericalLibRef.value.baseId = num; //打开对应的基础素材
    // 公众号图文单选
    if (num == '15') {
        ZWMatericalLibRef.value.multiple = false;
    }
    ZWMatericalLibRef.value.existFile = Number(9 - newArr.value.length); //打开对应的基础素材
    ZWMatericalLibRef.value.materVisible = true;
};

// 插入名字
const insetName = () => {
    form.content += '##客户姓名##';
};

const form = reactive({
    title: '',
    cust_filter_type: 1,
    user_ids: [],
    create_time: '',
    customer_tag: [],
    remove_customer_tag: [],
    content: '',
    sync_wx_type: 1,
    sync_wx_time: ''
});

const onInsertText = useInsertWelcomeContent('welcomeContent', form, 'content');

// 获取选择的信息
const getMaterlib = (res: any) => {
    // 文本
    // if (res.type == 1) {

    if (Array.isArray(res)) {
        let str = form.content;
        res.forEach((ele: any) => {
            if (ele.type == 0) {
                ele.data.forEach((item: any) => {
                    str += item.content;
                });
                form.content = str;
            } else if (ele.type == 10) {
                const result = [];
                if (ele.data.length > 0) {
                    ele.data[0].article_detail.forEach((item: any) => {
                        result.push({
                            type: 10,
                            id: item.id,
                            cur_icon: '/static/file/official.png',
                            name: item.title ? item.title : '标题',
                            title: item.title,
                            user_name: item.user_name
                        });
                    });
                }
                fileList.value = fileList.value.concat(changeType1(result));
            } else {
                const result = [];
                if (ele.data.length > 0) {
                    ele.data.forEach((item: any) => {
                        item.type = ele.type;
                        item.user_name = '张三';
                        result.push(item);
                    });
                }
                if (ele.local) {
                    fileList.value = fileList.value.concat(changeLocalType(result));
                } else {
                    fileList.value = fileList.value.concat(changeType1(result));
                }
            }
        });
    } else {
        const result = [];
        res.data.forEach((item: any) => {
            result.push({
                ...item,
                type: res.type
            });
        });
        if (res.local) {
            fileList.value = fileList.value.concat(changeLocalType(result));
        } else {
            fileList.value = fileList.value.concat(changeType1(result));
        }
    }
    newArr.value = fileList.value.filter((item: any) => {
        // return item.type != 1;
        return item.type != 0;
    });
    getGoBottom();
};

// 让滚动条始终在最底部
const getGoBottom = () => {
    upload_list_box.value.scrollTop = upload_list.value.offsetHeight;
    friend.value.scrollTop = friend.value.offsetHeight;
};
// 转换本地上传的数据
const changeLocalType = (data: any[]) => {
    const result = [];
    if (data.length > 0) {
        data.forEach((item: any) => {
            // 图片
            // if (item.type == 2) {
            if (item.type == 1) {
                item.cur_icon = '/static/file/pic.png';
                item.absolute_url = item.url;
                item.name = item?.file_name;
                item.title = item?.file_name;
                item.type2 = 1;
            }
            ///视频
            // if (item.type == 4) {
            if (item.type == 2) {
                item.cur_icon = '/static/file/mov.png';
                item.type2 = 2;
                item.thumbnail_url = getVideoImage(item.url, 80, 55);
            }
            // 音频
            // if (item.type == 3) {
            if (item.type == 4) {
                item.cur_icon = '/static/file/mp3.png';
                item.type2 = 4;
                item.title = item.name;
            }
            // 链接
            // if (item.type == 6) {
            if (item.type == 3 || item.type == 6) {
                item.cur_icon = '/static/file/link.png';
                item.name = item.title;
                item.type2 = 3;
            }
            // 文件
            // if (item.type == 5) {
            if (item.type == 5) {
                item.cur_icon = getSuffixIcon(item.url);
                item.type2 = 5;
                item.title = item.name;
            }
            // 电商素材
            // if (item.type == 6) {
            if (item.type == 7 || item.type == 8) {
                item.cur_icon = '/static/file/comm.png';
                item.name = item.title;
            }
            item.is_local = true;
            result.push(item);
        });
    }
    return result;
};

// 转换选中信息
const changeType = (data: any[]) => {
    const result = [];
    if (data.length > 0) {
        data.forEach((item: any) => {
            // 图片
            // if (item.type == 2) {
            if (item.type == 1) {
                item.cur_icon = '/static/file/pic.png';
                item.name = item?.media_file['name'];
                item.type2 = 1;
            }
            // 抽奖
            // if (item.type == 8) {
            if (item.type == 6) {
                item.cur_icon = '/static/file/wbgg.png';
                item.name = item.activity_name;
                item.type2 = 6;
            }
            ///视频
            // if (item.type == 4) {
            if (item.type == 2) {
                item.cur_icon = '/static/file/mov.png';
                item.name = item.media_file.name;
                item.type2 = 2;
            }
            // 音频
            // if (item.type == 3) {
            if (item.type == 4) {
                item.cur_icon = '/static/file/mp3.png';
                item.name = item.media_file['name'];
                item.type2 = 4;
            }
            // 链接
            // if (item.type == 6 || item.type == 7) {
            // if (item.type == 6) {
            if (item.type == 3) {
                item.cur_icon = '/static/file/link.png';
                item.name = item.title;
                item.type2 = 3;
            }
            // 电商素材--电商产品
            // if (item.type == 7) {
            // if (item.type == 7 || item.type == 8) {
            //   item.cur_icon = "/static/file/shop.png";
            //   item.name = item.product_name;
            // }
            // 收集表
            // if (item.type == 9) {
            if (item.type == 9) {
                item.cur_icon = '/static/file/form.png';
                item.name = item.link_title;
                item.type2 = 9;
            }
            // 电商素材--页面素材
            // if (item.type == 12) {
            //   item.cur_icon = "/static/file/shop.png";
            //   item.name = item.page_name;
            // }
            // 文件
            // if (item.type == 5) {
            if (item.type == 5) {
                item.cur_icon = getSuffixIcon(item.mediaFileInfo?.absolute_url);
                item.name = item.media_file['name'];
                item.type2 = 5;
            }
            // 电商商品
            // if (item.type == 10) {
            if (item.type == 7) {
                item.cur_icon = '/static/file/comm.png';
                item.name = item.product_name;
                item.src = item.cover;
                item.type2 == 7;
            }
            // if (item.type == 12) {
            if (item.type == 8) {
                item.cur_icon = '/static/file/comm.png';
                item.name = item.page_name;
                item.type2 == 8;
            }
            if (item.type == 10) {
                item.cur_icon = '/static/file/official.png';
                item.name = item.link_title;
                item.type2 == 10;
            }
            result.push(item);
        });
    }
    return result;
};

// 转换选中信息
const changeType1 = (data: any[]) => {
    const result = [];
    if (data.length > 0) {
        data.forEach((item: any) => {
            // 图片
            // if (item.type == 2) {
            if (item.type == 1) {
                item.cur_icon = '/static/file/pic.png';
                item.name = item.file_name;
                item.type2 = 1;
            }
            // 抽奖
            // if (item.type == 8) {
            if (item.type == 6) {
                item.cur_icon = '/static/file/wbgg.png';
                item.name = item.activity_name;
                item.type2 = 6;
            }
            ///视频
            // if (item.type == 4) {
            if (item.type == 2) {
                item.cur_icon = '/static/file/mov.png';
                item.name = item.file_name;
                item.type2 = 2;
            }
            // 音频
            // if (item.type == 3) {
            if (item.type == 4) {
                item.cur_icon = '/static/file/mp3.png';
                item.name = item.file_name;
                item.type2 = 4;
            }
            // 链接
            // if (item.type == 6 || item.type == 7) {
            // if (item.type == 6) {
            if (item.type == 3) {
                item.cur_icon = '/static/file/link.png';
                item.name = item.title;
                item.type2 = 3;
            }
            // 电商素材--电商产品
            // if (item.type == 7) {
            // if (item.type == 7 || item.type == 8) {
            //   item.cur_icon = "/static/file/shop.png";
            //   item.name = item.product_name;
            // }
            // 收集表
            // if (item.type == 9) {
            if (item.type == 9) {
                item.cur_icon = '/static/file/form.png';
                item.name = item.title;
                item.type2 = 9;
            }
            // 电商素材--页面素材
            // if (item.type == 12) {
            //   item.cur_icon = "/static/file/shop.png";
            //   item.name = item.page_name;
            // }
            // 文件
            // if (item.type == 5) {
            if (item.type == 5) {
                item.cur_icon = getSuffixIcon(item.mediaFileInfo?.absolute_url);
                item.name = item.mediaFileInfo?.name;
                item.type2 = 5;
            }
            // 电商商品
            // if (item.type == 10) {
            if (item.type == 7) {
                item.cur_icon = '/static/file/comm.png';
                item.name = item.product_name;
                item.src = item.cover;
                item.type2 == 7;
            }
            // if (item.type == 12) {
            if (item.type == 8) {
                item.cur_icon = '/static/file/comm.png';
                item.name = item.page_name;
                item.type2 == 8;
            }
            if (item.type == 10) {
                item.cur_icon = '/static/file/official.png';
                item.name = item.title;
                item.type2 == 10;
            }
            result.push(item);
        });
    }
    return result;
};
//更改欢迎语
const changeWords = () => {
    if (fileList.value.length > 0) {
        if (fileList.value[0].type == 0) {
            fileList.value[0] = {
                type: 0,
                content: form.content
            };
        } else {
            fileList.value.unshift({
                type: 0,
                content: form.content
            });
        }
    } else {
        fileList.value.unshift({
            type: 0,
            content: form.content
        });
    }
};
const emojiVisible = ref(false);
//表情包管理
const chooseEmoji = (emoji: any) => {
    //事件。数据包含文本区域的值
    onInsertText(emoji);
    // form.content = form.content + emoji;
    emojiVisible.value = false;
    changeWords();
};

// 短信签名
const smsOptions = ref([]);
const getCustomeSmsSignListFetch = async (source: any, flag?: boolean) => {
    const { result } = await getCustomeSmsSignList({ state: 2, source: source ? source : '' }, flag);
    smsOptions.value = result;
    if (result.length > 0) {
        formData.sms_sign_id = result[0].id;
    } else {
        formData.sms_sign_id = '';
        handleSelectSms('');
    }
};

// 选择短信模版
const handleSelectSmsTem = (val: any) => {
    formData.sms_template = smsTemOptions.value.filter((v: any) => v.id == val)[0].template_content;
};

// 短信模版
const smsTemOptions = ref([]);

const getCustomeSmsTemSignListFetch = async (id?: any, flag?: boolean) => {
    const { data } = await getCustomeSmsTemplateList(
        {
            sign_id: id ? id : formData.sms_sign_id || 20,
            state: 2,
            page: 1,
            page_size: 1000
        },
        flag
    );
    smsTemOptions.value = data;
};

// 选择短信签名
const handleSelectSms = (val: any) => {
    formData.sms_template_id = '';
    formData.sms_template = '';
    getCustomeSmsTemSignListFetch(val);
};

const toAuthList = (num?: any) => {
    getCustomeSmsAuthSso({ module: num || '' }).then((res: any) => {
        window.open(res.sso_url);
    });
};

// 表单数据
const formData = reactive({
    title: '', //标题名称
    period_type: 1, //有效期类型: 1-永久 2-固定期限
    period_time: [], //有效期
    desc: '', //规则描述
    trigger_type: 1, //触发类型：1 全部客户，2 指定客户
    isAllStage: '', // 是否全部客户阶段
    isAllSource: '', // 是否全部客户来源
    exclude: false, // 是否排除的标签
    trigger_rule: {
        stage_id: [], //客户阶段id
        source_id: [], //客户来源id
        tag_type: '1', //1 不限，2 满足以下任意标签，3满足以下全部标签
        tags: [], //标签id
        exclude_tags: [] //排除的标签id
    }, //客户触发规则：{"stage_id": "客户阶段id","source_id": "来源id","tag_type": "1 不限，2 满足以下任意标签，3满足以下全部标签","tags": [1,2],"exclude_tags": [3,4]}
    trigger_condition: {
        filter: 1, //选择商品类型
        product: [], //商品id
        retail_shop_id: '', //归属店铺
        behaviour_type: '', //触发行为
        minute: 0, //分钟
        next_behaviour: '' //下个行为
    }, //触发条件：{"retail_shop_id": "店铺id","behaviour_type": "5 加购，6 下单，7 支付，8 签收 9退货， 10评论","minute": "分钟","next_behaviour": "1 未支付，2 不限制支付，3未评论，4不限制评论，5未取消退货，6不限制取消退货"}
    trigger_way: 1, //触达方式：1  企微员工，2 发短信
    status: 1, //状态：1开启 2关闭
    sms_sign_id: '', //短信签名ID
    sms_template_id: '', //短信模板ID
    sms_sign: '', //短信签名
    sms_template: '', //短信模板
    welcome_info: {
        welcome_material: [],
        welcome_text: ''
    }
});
const changeFilter = () => {
    if (formData.trigger_condition.filter && formData.trigger_condition.filter != 1) {
        isShowGoods.value = true;
        if ([6].includes(formData.trigger_condition.behaviour_type)) {
            isMultiple.value = true;
        } else {
            isMultiple.value = false;
        }
    } else {
        isShowGoods.value = false;
    }
};
const productValid = (rule: any, value: any, callback: any) => {
    if (formData.trigger_condition.filter == 1) {
        callback();
    } else {
        if (value.length == 0) {
            callback(new Error('请选择商品'));
        } else {
            callback();
        }
    }
};
const ruleFormRef = ref<FormInstance>();
// 表单验证规则
const rules = reactive<FormRules>({
    title: [
        { required: true, message: '请输入规则名称', trigger: 'blur' },
        { min: 3, max: 15, message: '最短不少于3个，最长不超过15个字符', trigger: 'blur' }
    ],
    period_type: [
        {
            required: true,
            message: '请选择有效期',
            trigger: 'change'
        }
    ],
    trigger_type: [
        {
            required: true,
            message: '请选择触发对象',
            trigger: 'change'
        }
    ],
    trigger_way: [
        {
            required: true,
            message: '请选择触发方式',
            trigger: 'change'
        }
    ],
    task_title: [{ required: true, message: '请输入任务标题', trigger: 'blur' }],
    'trigger_condition.product': [{ required: true, validator: productValid, trigger: 'change' }]
});

const saveCopy = (params: any) => {
    if (pageType.value === 'edit') {
        params = { ...params, id: router.currentRoute.value.query?.id };
        params.period_time = formData.period_time;
        params.trigger_type = formData.trigger_type;
    }
    params.welcome_info = materialResult.value.welcome_info;
    if (params.trigger_type == 2) {
        if (
            params.trigger_rule.stage_id.length == 0 &&
            params.trigger_rule.source_id.length == 0 &&
            params.trigger_rule.tags.length == 0
        ) {
            ElMessage.error('指定客户时至少选择一个值');
            return;
        }
    }
    saveMarketRule(params).then((res: any) => {
        if (res) {
            router.push('/smartMarketing/precisionMarketing/plan');
        }
    });
};

// 保存
const submitForm = async (formEl: FormInstance | undefined, status: number) => {
    if (!formEl) return;
    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            let params = { ...formData, status };
            if (!formData.trigger_condition.retail_shop_id) {
                ElMessage.error('请选择触发条件');
                return;
            }
            if (pageType.value === 'copy') {
                saveCopy(params);
                return;
            }
            if (pageType.value === 'edit') {
                params = { ...params, id: router.currentRoute.value.query?.id };
                params.period_time = formData.period_time;
                params.trigger_type = formData.trigger_type;
            }
            params.welcome_info = materialResult.value.welcome_info;
            if (params.trigger_type == 2) {
                if (
                    params.trigger_rule.stage_id.length == 0 &&
                    params.trigger_rule.source_id.length == 0 &&
                    params.trigger_rule.tags.length == 0
                ) {
                    ElMessage.error('指定客户时至少选择一个值');
                    return;
                }
            }

            saveMarketRule(params).then((res: any) => {
                if (res) {
                    router.push('/smartMarketing/precisionMarketing/plan');
                }
            });
        }
    });
};

//取消
const submitCancel = () => {
    router.push('/smartMarketing/precisionMarketing/plan');
};

const getInfo = async (flag?: boolean) => {
    // let res = await getRuleDetails({id:router.currentRoute.value.query?.id})
    const data = await getRuleDetails({ id: router.currentRoute.value.query?.id }, flag);
    if (pageType.value === 'edit' || pageType.value === 'copy' || pageType.value === 'look') {
        formData.title = data.title;
        formData.task_title = data.task_title;
        if (pageType.value === 'copy') {
            formData.title = data.title + '   ' + dayjs().format('MM-DD') + '-副本';
        }
        formData.period_type = data.period_type;
        formData.period_time = data.period_time;
        formData.desc = data.desc;

        formData.trigger_type = 2;
        // 客户阶段
        const stageIds = stageList.value.map((v: any) => v.id);
        formData.trigger_rule.stage_id = data.trigger_rule.stage_id;
        if (formData.trigger_rule.stage_id.length == stageIds.length) {
            formData.isAllStage = '1';
        } else {
            formData.isAllStage = '';
        }

        // 客户来源

        const sourceIds = sourceList.value.map((v: any) => v.id);
        formData.trigger_rule.source_id = data.trigger_rule.source_id;
        if (formData.trigger_rule.source_id.length == sourceIds.length) {
            formData.isAllSource = '1';
        } else {
            formData.isAllSource = '';
        }
        // 客户标签
        // 1 不限，2 满足以下任意标签，3满足以下全部标
        formData.trigger_rule.tag_type = data.trigger_rule.tag_type;
        if (data.trigger_rule.tag_type == '2') {
            tagsList.value = data.trigger_rule.tags;
        }

        if (data.trigger_rule.tag_type == '3') {
            tagsList1.value = data.trigger_rule.tags;
        }
        // 排除客户标签
        formData.exclude = data.trigger_rule.exclude_tags.length > 0 ? true : false;
        if (formData.exclude) {
            formData.trigger_rule.exclude_tags = data.trigger_rule.exclude_tags;
            tagsList2.value = data.trigger_rule.exclude_tags;
        }

        // 触发条件
        formData.trigger_condition = data.trigger_condition;
        formData.trigger_condition.retail_shop_id = Number(data.trigger_condition.retail_shop_id);
        const storeItem = storeOptions.value.find((item: any) => {
            return item?.id == formData.trigger_condition.retail_shop_id;
        });
        source.value = storeItem.source;
        behaviorOptions.value = await getPrevBehavior({ source: source.value }, flag);

        formData.trigger_condition.behaviour_type = data.trigger_condition.behaviour_type
            ? Number(data.trigger_condition.behaviour_type)
            : '';
        await changeBehaviour1(Number(data.trigger_condition.behaviour_type), flag);
        formData.trigger_condition.next_behaviour = data.trigger_condition.next_behaviour
            ? Number(data.trigger_condition.next_behaviour)
            : '';
        formData.trigger_condition.filter = data.trigger_condition?.filter
            ? Number(data.trigger_condition?.filter)
            : '';
        selectGoods.value = data.trigger_condition?.product || [];
        formData.trigger_condition.product = getSetionId('id', data.trigger_condition?.product) || [];
        changeFilter();
        // 触发方式
        formData.trigger_way = data.trigger_way;

        // 触发对象
        formData.trigger_type = data.trigger_type;

        if ([1, 3].includes(formData.trigger_way)) {
            materialContentData.value = initMaterialData(data.welcome_info.welcome_material);
        } else {
            formData.sms_sign_id = data.sms_sign_id;
            formData.sms_template_id = data.sms_template_id;
            await getCustomeSmsTemSignListFetch(data.sms_sign_id, flag);
            handleSelectSmsTem(data.sms_template_id);
        }
        formData.task_title = data.task_title;
        inputContentData.value = data.welcome_info.welcome_text;
        materialContentData.value = initMaterialData(data.welcome_info.welcome_material);
    }
};

onBeforeMount(() => {
    pageType.value = router.currentRoute.value.query?.type;
    copyText.value = router.currentRoute.value.query?.copy;
});

onMounted(async () => {
    startLoading();
    await getStageList(true);
    await getSourceList(true);
    await fetchStoreList(true);
    await getIsSmsServiceFetch(true);
    await getCustomeSmsSignListFetch('', true);
    await getCustomeSmsTemSignListFetch(undefined, true);
    if (pageType.value == 'look') {
        isLook.value = true;
    }
    if (pageType.value === 'edit' || pageType.value === 'copy' || pageType.value === 'look') {
        getInfo(true);
    }
    endLoading();
});
</script>
<style scoped lang="scss">
.smart-marketing-container {
    background: #fff;
    padding: 24px;
    box-sizing: border-box;

    .btn-box {
        padding-top: 20px;
        text-align: center;
        border-top: 1px solid #d9d9d9;
    }

    .smc-title {
        font-size: 16px;
        font-weight: 500;
        color: #33302d;
        line-height: 22px;
        margin-bottom: 24px;
    }

    .w580 {
        width: 580px;
    }

    .mb24 {
        margin-bottom: 24px;
    }

    .border {
        height: 1px;
        background: #eaeaea;
        width: 100%;
    }

    .trigger-container {
        width: 723px;
        background: #fff;
        border: 1px solid #eaeaea;
        margin: 0 100px;
        padding: 25px 52px;
        margin-bottom: 24px;
    }

    .box-item {
        // width: 168px;
    }

    .list_item {
        padding-bottom: 45px;
        display: flex;

        .list_item_left {
            width: auto;
        }

        .list_item_right {
            margin-left: 80px;
            margin-top: -83px;
        }

        .item_title {
            font-size: 14px;
            line-height: 18px;
            font-family: STHeitiSC-Medium, STHeitiSC;
            font-weight: 500;
            color: #33302d;
            margin-bottom: 16px;

            .should {
                display: inline-block;
                color: red;
                margin-right: 3px;
            }

            .pop_icon {
                vertical-align: middle;
                margin-top: -2px;
                color: #fff;
                background: #969696;
                border-radius: 50%;
            }

            .title_icon {
                display: block;
                height: 18px;
                width: 3px;
                background: #ff6b00;
                float: left;
                margin-left: -15px;
            }
        }

        .item_con_input {
            width: 470px;
        }

        .item_con {
            .cus_type_0 {
                margin-top: 20px;
                font-size: 14px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                color: #33302d;

                span {
                    color: #ff6b00;
                }
            }

            .form_cus_type {
                margin-top: 5px;

                .el-form-item__content {
                    .form_item_input {
                        .el-input__inner {
                            width: 253px !important;
                        }
                    }
                }

                .picker_item_date {
                    :deep .el-form-item__content {
                        .el-input__inner {
                            width: 217px !important;
                        }
                    }
                }
            }

            .input_textarea {
                width: 100%;

                :deep(.el-textarea__inner) {
                    height: 170px;
                    background: #f8f8f8;
                    border: 0;
                    box-shadow: none;
                    border-bottom: 1px solid #eaeaea;
                    padding: 5px 0;
                }
            }
        }

        .item_message_box {
            background: #f8f8f8;
            border: 1px solid #eaeaea;
            border-radius: 4px;
            width: 580px;
            position: relative;

            .simple_fn {
                margin-top: 5px;
                display: flex;
                align-items: center;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                color: #33302d;
                padding-bottom: 6px;
                border-bottom: 1px solid #eaeaea;

                .cus_name {
                    margin-right: 18px;
                    color: #ff6b00;
                    cursor: pointer;
                }

                .emoj {
                    margin-left: 5px;
                    cursor: pointer;
                }

                .sele_text {
                    cursor: pointer;
                }
            }

            .upload_list_box {
                overflow: hidden;
                height: 135px;
            }

            .upload_list {
                .upload_item {
                    margin-top: 5px;
                    width: 440px;
                    height: 32px;
                    box-sizing: border-box;
                    background: #eaeaea;
                    display: flex;
                    padding: 0 10px 0 14px;
                    align-items: center;

                    .file_icon {
                        width: 20px;
                        height: 20px;
                        margin-right: 7px;
                    }

                    .file_name {
                        width: 375px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }

                    .del_icon {
                        width: 10px;
                        height: 10px;
                        cursor: pointer;
                    }
                }
            }

            .upload_btn {
                margin-top: 8px;
                width: 360px;
                height: 32px;
                background: #f8f8f8;
                border: 1px solid #d9d9d9;
                padding: 0 12px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                font-size: 14px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                cursor: pointer;
                color: #969696;
                margin-bottom: 15px;

                .upload_text {
                    margin-left: 8px;
                }
            }

            .upload_pop {
                position: absolute;
                bottom: 50px;
                left: -20px;
                width: 480px;
                height: 84px;
                background: #fff;
                border-radius: 12px;
                box-shadow: 0 2px 4px 0 rgb(216 216 216 / 50%);
                display: flex;
                align-items: center;
                justify-content: space-around;

                .item_pop {
                    width: 60px;
                    height: 62px;
                    background: #fff;
                    border-radius: 6px;
                    border: 1px solid #f9f9f9;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    cursor: pointer;

                    .item_pop_icon {
                        width: 40px;
                    }

                    .item_pop_name {
                        font-size: 14px;
                        margin-top: 2px;
                        font-family: PingFangSC-Regular, 'PingFang SC';
                        font-weight: 400;
                        color: #1a1918;
                    }
                }

                &::after {
                    content: '';
                    position: absolute;
                    bottom: -10px;
                    left: 50%;
                    transform: translate(-50%);
                    width: 0;
                    height: 0;
                    border-left: 10px solid transparent;
                    border-right: 10px solid transparent;
                    border-top: 10px solid #fff;
                }
            }

            .emoj_box {
                width: 270px;
                position: absolute;
                top: -40px;
            }
        }
    }

    .prev_box {
        flex: 1;

        .pre_title {
            margin-top: 100px;
            text-align: center;
        }

        .phone_con {
            position: relative;
            margin: 10px auto;
            width: 244px;
            height: 495px;
            box-sizing: border-box;
            border-radius: 36px;
            border: 9px solid #eef5fe;
            background: url('@/assets/image/channel/phone_bg.png');
            background-size: cover;

            .phone_List {
                width: 100%;
                box-sizing: border-box;
                position: absolute;
                top: 48px;
                height: 380px;
                bottom: 48px;
                padding: 7px 10px;
            }
        }
    }
}

.pop_select_box {
    height: 84px;

    .upload_btn {
        margin-top: 8px;
    }

    .upload_pop {
        background: #fff;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .item_pop {
            // min-width: 60px;
            height: 62px;
            padding: 0 3px;
            display: flex;
            border-radius: 6px;
            border: 1px solid #f9f9f9;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;

            .item_pop_icon {
                width: 43px;
            }

            .item_pop_name {
                font-size: 14px;
                margin-top: 2px;
                font-family: PingFangSC-Regular, 'PingFang SC';
                font-weight: 400;
                color: #1a1918;
            }
        }
    }
}

.sms-msg {
    .sms-text {
        font-size: 14px;
        font-weight: 300;
        color: #969696;
        line-height: 14px;
        display: inline-block;
        padding-left: 12px;

        span {
            color: #ff6b00;
            cursor: pointer;
            border-bottom: 1px solid #ff6b00;
        }
    }

    .tem-box {
        width: 580px;
        height: 72px;
        background: #fffaf9;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 300;
        color: #33302d;
        line-height: 20px;
        padding: 16px;
        box-sizing: border-box;
    }
}

// 组件内公共样式
.d-flex {
    display: flex;
}

.d-inline-flex {
    display: inline-flex;
}

.ai-center {
    align-items: center;
}

.jc-center {
    justify-content: center;
}

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.mr-1 {
    margin-right: 15px;
}

.mb-1 {
    margin-bottom: 15px;
}

.border {
    margin: 24px 0;
}

.mt20 {
    margin-top: 20px;
}

.ml10 {
    margin-left: 10px;
}

.pad12 {
    padding: 0 12px;
}

.w400 {
    width: 400px;
}

.help_icon {
    width: 16px;
    height: 16px;
    margin-left: 4px;
}

.msg-text {
    font-size: 12px;
    color: #ff6b00;
    line-height: 14px;
}

.content {
    box-sizing: border-box;
    display: flex;

    .content-left {
        flex: 1;
        padding-right: 48px;
        border-right: 1px solid #eee;
    }

    .content-right {
        padding: 0 24px 24px 48px;

        .phone-title {
            text-align: center;
            margin-bottom: 8px;
        }
    }
}

.text-tip {
    margin: 0 5px;
}
</style>
